<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			body {
				background: radial-gradient(circle, rgba(0,0,0,.9) 0%, rgba(0,0,0,.7) 100%);
				--translateZ: 150px;
				--side: 300px;
				overflow: hidden;
			}
			.container {
				display: flex;
				justify-content: center;
				align-items: center;
				perspective: 1000px;
				height: 100vh;
			}
			ul {
				position: relative;
				width: var(--side);
				height: var(--side);
				transform-style: preserve-3d;
				transform: rotateX(30deg) rotateZ(45deg);
				animation: spin 15s infinite linear;
			}
			li {
				position: absolute;
				width: var(--side);
				height: var(--side);
				/* background-image: url("../image/demo.jpg") ; */
				background-size: 100%;
				background-repeat: no-repeat;
				background-size: cover;
				border: 1px solid #fff;
				transform-style: preserve-3d;
			}
			
			.front {
				/* background-color: #f00; */
				transform: translateZ(var(--translateZ));
			}
			
			.back {
				/* background-color: #0f0; */
				transform: rotateY(180deg) translateZ(var(--translateZ));
			}
			
			.right {
				/* background-color: #00f; */
				transform: rotateY(90deg) translateZ(var(--translateZ));
			}
			
			.left {
				/* background-color: #ff0; */
				transform: rotateY(-90deg) translateZ(var(--translateZ));
			}
			
			.top {
				/* background-color: #f0f; */
				transform: rotateX(90deg) translateZ(var(--translateZ));
			}
			
			.bottom {
				/* background-color: #888; */
				transform: rotateX(-90deg) translateZ(var(--translateZ));
			}
			.chip-box {
				transform-style: preserve-3d;		
				display: grid;
				grid-template-columns: repeat(3, 100px);
			}
			.chip {
				box-sizing: border-box;
				width: calc(var(--side) / 3);
				height: calc(var(--side) / 3);
				background-color: #333;
				border: 1px solid #fff;
				background-image: url("../image/demo.jpg");
				background-size: var(--side) var(--side);
				background-repeat: no-repeat;
				transition: 5s;
			}
			
			@keyframes spin {
				from { transform: rotateX(0) rotateY(0); }
				to { transform: rotateX(-360deg) rotateY(-360deg); }
			}
		</style>
	</head>
	<body>
		<div class="container">
			<ul>
				<li class="front"></li>
				<li class="back"></li>
				<li class="left"></li>
				<li class="right"></li>
				<li class="top"></li>
				<li class="bottom"></li>
			</ul>
		</div>
		<script>
			const lis = Array.from(document.querySelectorAll("ul>li"));
			
			function getRandomInt(min = 0, max = 1) {
				if (min > max) [min, max] = [max, min];
 				return Math.floor(Math.random() * (max - min + 1) + min)
			}
			
			function applyTransform(element, translateX, translateY, translateZ,  rotate) {
				element.style.transform = `translate3d(${translateX}px, ${translateY}px, ${translateZ}px) rotate(${rotate}deg)`;
			}
			
			function renderChip(chip) {
			   setTimeout(() => {
				   const translateX = getRandomInt(-300, 300);
				   const translateY = getRandomInt(-300, 300);
				   const translateZ = getRandomInt(-300, 300);
				   const rotate = getRandomInt(0, 360);
				   applyTransform(chip, translateX, translateY, translateZ, rotate);
				   setTimeout(() => {
					   applyTransform(chip, 0, 0, 0, 0);
				   }, 5000);
			   }, 1000)
			}
			
			lis.forEach((liDom, i) => {
				liDom.innerHTML = `
				<div class="chip-box">
					${new Array(9).fill(0).reduce((str) => str + `<div class="chip"></div>`, '')}
				</div>
				`
				const chips = Array.from(liDom.querySelectorAll(".chip"))
				chips.forEach((chipDom, index) => {
					chipDom.style.backgroundImage = `url("../image/0${i + 1}.jpg")`;
					chipDom.style.backgroundPosition = `-${index  % 3 * 100}px -${ Math.floor(index / 3) * 100}px`;
					renderChip(chipDom)
					setInterval(() => renderChip(chipDom), 11000)
				})
				
			})
			
		</script>
	</body>
	
</html>